<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta name="keywords" content="">
  <meta name="description" content="">
  <meta name="author" content="">
  <link rel="icon" href="assets/images/favicon.png" type="image/png">
  <title></title>

    <!-- BEGIN PAGE LEVEL STYLES -->
    <link href="assets/plugins/cropper-master/cropper.min.css" rel="stylesheet" type="text/css"/>
    <!-- END PAGE LEVEL STYLES -->
    <link href="assets/css/icons.css" rel="stylesheet">
    <link href="assets/css/bootstrap.min.css" rel="stylesheet">
    <link href="assets/css/style.css" rel="stylesheet">
    <link href="assets/css/responsive.css" rel="stylesheet">
    


</head>

<body class="sticky-header">
<div id="div_vue">

    <!--Start left side Menu-->
    <div id="nav-left" class="left-side sticky-left-side">
    </div>
    <!--End left side menu-->

    
    <!-- main content start-->
    <div class="main-content" >

        <!-- header section start-->
        <div class="header-section">

            <a class="toggle-btn"><i class="fa fa-bars"></i></a>

            <form class="searchform">
                <input type="text" class="form-control" name="keyword" placeholder="Search here..."/>
            </form>

            <!--notification menu start -->
            <div class="menu-right">
                <ul class="notification-menu">
                    <li>
                        <a href="#" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
                            <img :src="avatar" alt=""/>
                            头像
                            <span class="caret"></span>
                        </a>
                        <ul class="dropdown-menu dropdown-menu-usermenu pull-right">
                            <li><a href="#"> <i class="fa fa-wrench"></i> uff </a></li>
                            <li><a href="#"> <i class="fa fa-user"></i> Profile </a></li>
                            <li><a href="#"> <i class="fa fa-info"></i> Help </a></li>
                            <li><a href="#"> <i class="fa fa-lock"></i> Logout </a></li>
                        </ul>
                    </li>

                </ul>
            </div>
            <!--notification menu end -->

        </div>
        <!-- header section end-->

        <!--body wrapper start-->
        <div class="wrapper">
              
              <!--Start Page Title-->
               <div class="page-title-box">
                    <h4 class="page-title">Image Crop</h4>
                    <ol class="breadcrumb">
                        <li>
                            <a href="#">Dashboard</a>
                        </li>
                        <li>
                            <a href="#">Form</a>
                        </li>
                        <li class="active">
                            Image Crop
                        </li>
                    </ol>
                    <div class="clearfix"></div>
                 </div>
                  <!--End Page Title-->          
           
           
               <!--Start row-->
                <div class="row">
                    <div class="col-md-12">
                        <div class="white-box">
                            <div class="row">
                                <div class="col-md-6">
                                 <h2 class="header-title">Image Cropper</h2>
                                    <div class="image-crop m-b-15">
                                        <img  :src="avatar" style="width: 100%; height: 100%;" alt="">
                                    </div>
                                </div>
                                <div class="col-md-6">
                                  <h2 class="header-title">Image Preview</h2>
                                    <div class="img-preview  m-b-15"></div>
                                    <div class="m-b-10">
                                        <button class="btn btn-primary" id="zoomIn">Zoom In</button>
                                        <button class="btn btn-primary" id="zoomOut">Zoom Out</button>
                                        <button class="btn btn-primary" id="rotateLeft">Rotate Left</button>
                                        <button class="btn btn-primary" id="rotateRight">Rotate Right</button>
                                        <button class="btn btn-danger" id="clear">Clear</button>
                                        <p class="text-danger m-t-15">Note: Be sure the browser supports canvas before call Rotate method.</p>
                                        <div class="input-group m-t-20">
                                            <span class="input-group-btn">
                                                <button class="btn btn-info" id="replace" type="button">Replace</button>
                                            </span>
                                            <input class="form-control" id="replaceWith" type="text" value="assets/images/crop.png" placeholder="Input image URL">
                                        </div>
                                        <form  id= "uploadForm" >
                                            <input type="file" name="file" id="fileUpload"/>
                                            <input type="button" onclick=" doUpload()" value="头像上传"/>
                                        </form>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                  </div>
               <!-- end row --> 
 
            </div>
      <!-- End Wrapper-->


        <!--Start  Footer -->
        <footer class="footer-main">Copyright &copy; 2018.Company name All rights reserved.<a target="_blank" href="http://sc.chinaz.com/moban/">&#x7F51;&#x9875;&#x6A21;&#x677F;</a></footer>	
         <!--End footer -->

       </div>
      <!--End main content -->


</div>
    <!--Begin core plugin -->
    <script src="assets/js/jquery.min.js"></script>
    <script src="assets/js/bootstrap.min.js"></script>
    <script src="assets/plugins/moment/moment.js"></script>
    <script  src="assets/js/jquery.slimscroll.js "></script>
    <script src="assets/js/jquery.nicescroll.js"></script>
    <script src="assets/js/functions.js"></script>
    <!-- End core plugin -->

    <!-- BEGIN PAGE LEVEL SCRIPTS -->
	 <script src="assets/plugins/cropper-master/cropper.min.js"></script>
     <script src="assets/pages/imagecrop-custom.js"></script>
    <!-- BEGIN PAGE LEVEL SCRIPTS -->
<!--====== Vue js ======-->
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<!--  httputil  -->
<script src="assets/js/util/http-util.js"></script>


</body>
<script>
    var vmm = new Vue({
        el: '#div_vue',
        data: {
            avatar: ""
        },
        methods: {
            getAvatar: function () {
                console.log("进入方法");
                let url = "/shop_admin/getAvatar";
                let thisObj = this;
                doGet(url, function (resp) {
                    thisObj.avatar = "assets/images/avatar/"+resp;
                    console.log(thisObj.avatar);
                })
            }
        },
        mounted: function () {
            this.getAvatar();
        }
    });
    function doUpload() {
        var formData = new FormData($( "#uploadForm" )[0]);
        $.ajax({
            url: 'http://localhost:8080/shop_admin/upload' ,
            type: 'POST',
            data: formData,
            async: false,
            cache: false,
            contentType: false,
            processData: false,
            success: function (returndata) {
                var parse = JSON.parse(returndata);
                console.log(returndata);
                if (parse.code===100){
                    alert("上传成功");
                    location.href = "http://localhost:8080/view_admin/image-crop.html";
                }
                else {
                    alert(parse.msg);
                }
            },
            error: function (returndata) {
                alert(returndata.msg);
            }
        });
    }

</script>
<script>
    $(function () {
        $('#footer').load('footer.html');
        $('#nav-left').load('nav-left.html');
    })
</script>
</html>
